import {
  Button,
  ScrollView,
  SectionList,
  StatusBar,
  StyleSheet,
  Text,
  TouchableWithoutFeedback,
  View,
} from 'react-native';
import React from 'react';
import HomeTab from '../components/Tab';
import SvgSearch from '../assets/svg/search.svg';
import {useNavigation} from '@react-navigation/native';
import {HomeNavigationProp} from '../types';
export default function Home() {
  const list = [
    {
      key: 'header',
      data: [{name: 'header'}],
    },
    {
      key: 'list',
      data: [{name: 'list'}],
    },
  ];
  return (
    <View style={{flex: 1, backgroundColor: '#eee', overflow: 'scroll'}}>
      <StatusBar backgroundColor="#FFF" barStyle="dark-content"></StatusBar>
      <Header></Header>
      <HomeTab></HomeTab>
    </View>
  );
}
const Header = () => {
  const navigation = useNavigation<HomeNavigationProp>();
  return (
    <>
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
          height: 60,
          backgroundColor: '#fff',
          paddingLeft: 10,
          paddingRight: 10,
        }}>
        <TouchableWithoutFeedback
          onPress={() => {
            navigation.navigate('My');
          }}>
          <View
            style={{
              borderRadius: 40,
              width: 40,
              alignItems: 'center',
              justifyContent: 'center',
              height: 40,
              backgroundColor: '#eee',
            }}>
            <Text>头像</Text>
          </View>
        </TouchableWithoutFeedback>
        <View
          style={{
            width: '60%',
          }}>
          <TouchableWithoutFeedback
            onPress={() => {
              navigation.navigate('SearchPage');
            }}>
            <View
              style={{
                height: 30,
                borderRadius: 30,
                borderWidth: 1,
                borderColor: '#333',
                borderStyle: 'solid',
                justifyContent: 'center',
                paddingLeft: 10,
              }}>
              <SvgSearch width={15} height={15}></SvgSearch>
            </View>
          </TouchableWithoutFeedback>
        </View>
        <View
          style={{
            borderRadius: 30,
            width: 30,
            alignItems: 'center',
            justifyContent: 'center',
            height: 30,
            backgroundColor: '#eee',
          }}>
          <Text>AD</Text>
        </View>
        <View
          style={{
            borderRadius: 20,
            width: 20,
            alignItems: 'center',
            justifyContent: 'center',
            height: 20,
            backgroundColor: '#eee',
          }}>
          <Text>AD</Text>
        </View>
      </View>
    </>
  );
};
const styles = StyleSheet.create({});
